<template>
	<view class="template-home" style="background-color: #f1f1f1;">
		<!-- 顶部自定义导航 -->
		<tn-navbar :placeholder="true" fixed bg-color="#FFFFFF00" text-color="#000"> {{ title }} </tn-navbar>

		<!-- 搜索栏 -->
		<view style="padding: 10px 10px 0 10px;display: flex;justify-content: space-between;align-items: center;">
			<tn-search-box v-model="curSearch" :throllte="false" :search-button="false"
				style="flex: 1;"></tn-search-box>
			<tn-icon name="buy" :size="60" style="padding: 10px 0 10px 10px;" @tap.stop="toCartChange"></tn-icon>
		</view>

		<!-- 正文 -->
		<view class="personSlBlock">
			<scroll-view :scroll-top="0" scroll-y>
				<view :style="'height:' + topH + 'px;'"
					style="display: flex;flex-direction: column;background-color: #fff;">

					<!-- 产品列表 -->
					<view style="padding: 0 5px 10px 5px;" v-if="puctData">
						<template v-if="puctData && puctData.length === 1">
							<mallt-goods :item="puctData[0]" @puctChange="puctChange" @cartChages="cartChages"
								@likeChange="likeChange"></mallt-goods>
						</template>

						<tn-water-fall v-else :data="puctData" mode="normal"> <!-- normal calc -->
							<template #left="{ item }">
								<mallt-goods :item="item" @puctChange="puctChange" @cartChages="cartChages"
									@likeChange="likeChange"></mallt-goods>
							</template>
							<template #right="{ item }">
								<mallt-goods :item="item" @puctChange="puctChange" @cartChages="cartChages"
									@likeChange="likeChange"></mallt-goods>
							</template>
						</tn-water-fall>
					</view>

				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
import utils from '../../common/utils';
export default {
	data() {
		return {
			topH: 0,
			title: '悦君玺 • 重庆',
			sConf: getApp().globalData,
			curSearch: '',
			puctData: null
		}
	},
	onLoad(options) {
		const mode = Number(options.mode || 0)
		this.loadDefData()
		this.loadProductList(mode)
	},
	methods: {
		loadDefData() {
			// 计算窗口高度
			let that = this;
			const iH = this.sConf.iH;
			const query = uni.createSelectorQuery().in(this);
			query.select('.personSlBlock').boundingClientRect(rect => {
				that.topH = iH - Math.ceil(rect.top);
			}).exec();
		},
		loadProductList(e) {
			let host = this.sConf.host + '/weapps/product/'
			let token = this.sConf.token || ''
			let data = {
				status: 1,
				is_list: 1,
				mode: e,
				is_money: 1,
				is_card: 0,
				ordering: '-hot'
			}
			utils.authenticatorList(host, token, data).then((res) => {
				console.log('加载产品列表', res);
				if (res.rescode === 200) {
					this.puctData = res.resmsg
				}
			});
		},
		/**
		 * 搜索栏
		 */
		toCartChange() {

		},
		puctChange(e) {
			console.log('puctChange', e);
			uni.navigateTo({
				url: '/pages/puctplay/puctplay?puct=' + e,
			});
			// uni.redirectTo({
			// 	url: '/pages/puctplay/puctplay?puct=' + e,
			// })
		},
		cartChages(e) {
			console.log('cartChages', e);
		},
		likeChange(e) {
			console.log('likeChange', e);
		},
	}
}
</script>

<style lang="scss" scoped></style>